<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				text-align: center;
				margin: 5% auto;
			}
			#box #btn{
				width: 50px;
				height: 50px;
				line-height: 50px;
				border-radius: 50%;
				margin: 12px auto;
				cursor: pointer;
				background-color:#ccc
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="btn">开</div>
			<img src="img/pic_bulboff.gif"/>
		</div>
		<script type="text/javascript">
			
			var btn = document.getElementById('btn');
			var img = document.querySelector('img');
			
			btn.onclick = function () {
				if (this.innerHTML == '开') {
					this.innerHTML = '关';
					this.style.backgroundColor = 'brown';
					this.style.color = '#fff';
					img.src = 'img/pic_bulbon.gif'
				} else{
					this.innerHTML = '开';
					this.style.backgroundColor = '#ccc';
					this.style.color = '#000';
					img.src = 'img/pic_bulboff.gif'
				}
			}
		</script>
	</body>
</html>
